@use '_variables' as v;
@use '_values/sizing';
@use '_values/colors';

$main-space-var: v.use(v.$sizing-nav-height-placeholder);
$main-extra-space: sizing.$main-bottom-space;

@mixin main-extra-space-for-nav() {
	padding-bottom: $main-space-var;
}

@mixin escape-main-sides-space() {
	margin-left: sizing.$main-sides-space * -1;
	margin-right: sizing.$main-sides-space * -1;
}

@mixin override-main-sides-space() {
	padding-left: sizing.$main-sides-space;
	padding-right: sizing.$main-sides-space;

	@include escape-main-sides-space;
}

@mixin override-main-padding() {
	margin-bottom: calc(($main-space-var + $main-extra-space) * -1);

	@include override-main-sides-space;
	@include main-extra-space-for-nav;
}

@mixin error-message-box() {
	background-color: colors.$error-light;
	color: colors.$error;
	padding: 10px;
	margin-top: 10px;
	border-radius: 10px;
	padding-left: 30px;
	word-break: break-all;
	padding-right: 20px;
	position: relative;
	font-weight: 500;
	font-size: 13px;
	line-height: 130%;

	&::before {
		content: '';
		background-image: url('_assets/images/Info.svg');
		margin-right: 5px;
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
		height: 16px;
		width: 16px;
		margin-left: -20px;
	}
}

@mixin receipt-details-bg() {
	background-color: colors.$gray-40;
	border-radius: 10px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;

	&::after {
		content: '';
		mask: url('_assets/images/receipt_bottom.svg');
		background-color: colors.$gray-40;
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: 100%;
		width: 320px;
		height: 20px;
		display: flex;
		left: -20px;
		top: 25px;
		position: relative;
	}
}

@mixin overflow-ellipsis($max-width: 100%) {
	max-width: $max-width;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

@mixin angled-arrow($color: colors.$gray-65) {
	transform: rotate(135deg);
	font-weight: 300;
	margin: 0;
	margin-right: 10px;
	font-size: 14px;
	color: $color;
}

@mixin typography($type) {
	@if $type == 'stat/col-header' {
		font-style: normal;
		font-weight: 600;
		font-size: 12px;
		text-transform: uppercase;
		color: colors.$gray-75;
	} @else if $type == 'page-description' {
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		color: colors.$gray-80;
	} @else if $type == 'tooltip/label' {
		font-style: normal;
		font-weight: 600;
		font-size: 11px;
		text-transform: uppercase;
		color: colors.$gray-80;
	} @else if $type == 'stats/text-lg' {
		font-style: normal;
		font-weight: 600;
		font-size: 18px;
		color: colors.$gray-100;
	} @else if $type == 'header/search-text' {
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
		color: colors.$gray-70;
	} @else if $type == 'table/text-xs' {
		font-style: normal;
		font-weight: 500;
		font-size: 12px;
		color: colors.$gray-75;
	} @else if $type == 'table/text-sm' {
		font-style: normal;
		font-weight: 500;
		font-size: 13px;
		color: colors.$white;
	} @else if $type == 'table/text-lg' {
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
	} @else if $type == 'table/title-sm' {
		font-style: normal;
		font-weight: 600;
		font-size: 14px;
		color: colors.$gray-100;
	} @else if $type == 'page-title' {
		font-style: normal;
		font-weight: 600;
		font-size: 16px;
		color: colors.$gray-100;
	} @else if $type == 'empty' {
		font-style: italic;
		font-weight: 400;
		font-size: 12px;
		text-align: center;
		color: colors.$gray-70;
		padding: 0 16px;
		letter-spacing: 0;
	} @else if $type == 'Primary/BodySmall-M' {
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0;
	} @else if $type == 'Primary/Body-M' {
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0;
	} @else if $type == 'Primary/SubtitleSmall-M' {
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0;
	} @else if $type == 'Primary/BodySmall-SB' {
		font-size: 13px;
		font-weight: 600;
	} @else if $type == 'Primary/CAPTIONSMALL-M' {
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.05em;
	} @else if $type == 'Primary/CAPTION-SB' {
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-align: center;
	} @else if $type == 'Primary/CAPTIONSMALL-SB' {
		font-size: 11px;
		font-weight: 600;
		line-height: 11px;
		letter-spacing: 0.05em;
	} @else if $type == 'Primary/CAPTION-B' {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-align: center;
	} @else if $type == 'Primary/CAPTION-M' {
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.05em;
		text-align: center;
	} @else if $type == 'ParagraphPrimary/P2-R' {
		font-size: 13px;
		font-weight: 400;
		letter-spacing: 0;
	} @else if $type == 'page-ex-small' {
		font-weight: 500;
		font-size: 10px;
		letter-spacing: 0;
	} @else if $type == 'Primary/Heading1-B' {
		font-size: 28px;
		font-weight: 700;
		letter-spacing: 0;
		text-align: center;
	} @else if $type == 'Primary/Heading3-SB' {
		font-size: 20px;
		font-weight: 600;
		letter-spacing: 0;
		text-align: center;
	} @else if $type == 'Primary/Heading3-M' {
		font-size: 20px;
		font-weight: 500;
		letter-spacing: 0;
		text-align: center;
	} @else if $type == 'ParagraphPrimary/P1-M' {
		font-size: 14px;
		font-weight: 500;
		line-height: 130%;
		letter-spacing: 0;
		text-align: center;
	} @else if $type == 'ParagraphPrimary/P1-SB' {
		font-size: 14px;
		font-weight: 600;
		line-height: 18px;
		letter-spacing: 0;
	} @else if $type == 'ParagraphPrimary/P2-M' {
		font-size: 13px;
		font-weight: 500;
		line-height: 17px;
		letter-spacing: 0;
	} @else if $type == 'Primary/Body-SB' {
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0;
	} @else if $type == 'mono-type' {
		// TODO change to mono font
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
		text-decoration: none;
		line-height: 90%;
	} @else {
		@error 'Typography #{$type} has not found';
	}
}
